<template>
  <div class="behavior-container">
    <!-- 模式选择器 -->
    <el-select 
      v-model="selectedMode" 
      placeholder="选择模式" 
      size="large" 
      class="mode-selector"
      @change="handleModeChange"
      :loading="modeLoading"
    >
      <el-option 
        v-for="mode in modes" 
        :key="mode.gamenumber" 
        :label="mode.gameName" 
        :value="mode.gamenumber"
      ></el-option>
    </el-select>
    
    <!-- 灭火器使用事件 -->
    <el-row :gutter="20" class="chart-row">
      <!-- 灭火器使用事件耗时占比 -->
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="chart-header">
              <span>灭火器使用事件耗时占比</span>
              <el-button size="small" type="primary" plain @click="exportEventDistribution('fireExtinguisher')">
                <el-icon><Download /></el-icon>导出数据
              </el-button>
            </div>
          </template>
          <div id="fire-extinguisher-chart" class="chart-container"></div>
          <div class="chart-loading" v-if="fireExtinguisherLoading">
            <el-icon><Loading /></el-icon> 加载中...
          </div>
        </el-card>
      </el-col>
      
      <!-- 灭火器使用事件得分对比 -->
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="chart-header">
              <span>灭火器使用事件得分对比</span>
              <el-button size="small" type="primary" plain @click="exportScoreDistribution('fireExtinguisher')">
                <el-icon><Download /></el-icon>导出数据
              </el-button>
            </div>
          </template>
          <div id="fire-extinguisher-score-chart" class="chart-container"></div>
          <div class="chart-loading" v-if="fireExtinguisherScoreLoading">
            <el-icon><Loading /></el-icon> 加载中...
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 毛巾使用事件 -->
    <el-row :gutter="20" class="chart-row">
      <!-- 毛巾使用事件耗时占比 -->
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="chart-header">
              <span>毛巾使用事件耗时占比</span>
              <el-button size="small" type="primary" plain @click="exportEventDistribution('towel')">
                <el-icon><Download /></el-icon>导出数据
              </el-button>
            </div>
          </template>
          <div id="towel-chart" class="chart-container"></div>
          <div class="chart-loading" v-if="towelLoading">
            <el-icon><Loading /></el-icon> 加载中...
          </div>
        </el-card>
      </el-col>
      
      <!-- 毛巾使用事件得分对比 -->
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="chart-header">
              <span>毛巾使用事件得分对比</span>
              <el-button size="small" type="primary" plain @click="exportScoreDistribution('towel')">
                <el-icon><Download /></el-icon>导出数据
              </el-button>
            </div>
          </template>
          <div id="towel-score-chart" class="chart-container"></div>
          <div class="chart-loading" v-if="towelScoreLoading">
            <el-icon><Loading /></el-icon> 加载中...
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 幸存者事件 -->
    <el-row :gutter="20" class="chart-row">
      <!-- 幸存者事件耗时占比 -->
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="chart-header">
              <span>幸存者事件耗时占比</span>
              <el-button size="small" type="primary" plain @click="exportEventDistribution('survivor')">
                <el-icon><Download /></el-icon>导出数据
              </el-button>
            </div>
          </template>
          <div id="survivor-chart" class="chart-container"></div>
          <div class="chart-loading" v-if="survivorLoading">
            <el-icon><Loading /></el-icon> 加载中...
          </div>
        </el-card>
      </el-col>
      
      <!-- 幸存者事件得分对比 -->
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="chart-header">
              <span>幸存者事件得分对比</span>
              <el-button size="small" type="primary" plain @click="exportScoreDistribution('survivor')">
                <el-icon><Download /></el-icon>导出数据
              </el-button>
            </div>
          </template>
          <div id="survivor-score-chart" class="chart-container"></div>
          <div class="chart-loading" v-if="survivorScoreLoading">
            <el-icon><Loading /></el-icon> 加载中...
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import * as echarts from 'echarts'
import { saveAs } from 'file-saver'
import * as XLSX from 'xlsx'
import { API_BASE_URL } from '@/utils/constants'
import { ElMessage } from 'element-plus'
import axios from 'axios'

// 模式选择
const selectedMode = ref('')
const modes = ref([])
const modeLoading = ref(false)

// 事件耗时数据
const fireExtinguisherData = ref([])
const towelData = ref([])
const survivorData = ref([])

// 得分数据
const fireExtinguisherScoreData = ref([])
const towelScoreData = ref([])
const survivorScoreData = ref([])

// 加载状态
const fireExtinguisherLoading = ref(true)
const towelLoading = ref(true)
const survivorLoading = ref(true)
const fireExtinguisherScoreLoading = ref(true)
const towelScoreLoading = ref(true)
const survivorScoreLoading = ref(true)

// 图表实例
let fireExtinguisherChart = null
let towelChart = null
let survivorChart = null
let fireExtinguisherScoreChart = null
let towelScoreChart = null
let survivorScoreChart = null

// 获取模式列表
const fetchModes = async () => {
  modeLoading.value = true
  try {
    const response = await axios.get(`${API_BASE_URL}/game/list`)
    if (response.data.code === 1) {
      modes.value = response.data.data || []
      if (modes.value.length > 0) {
        selectedMode.value = modes.value[0].gamenumber
        loadDataForSelectedMode()
      } else {
        ElMessage.warning('暂无可用模式')
      }
    } else {
      ElMessage.error(`获取模式列表失败: ${response.data.message}`)
    }
  } catch (error) {
    console.error('获取模式列表失败:', error)
    ElMessage.error('获取模式列表失败')
  } finally {
    modeLoading.value = false
  }
}

// 模式变化处理
const handleModeChange = () => {
  console.log('已选择模式:', selectedMode.value)
  loadDataForSelectedMode()
}

// 加载所选模式的数据
const loadDataForSelectedMode = () => {
  if (!selectedMode.value) {
    ElMessage.warning('请选择有效模式')
    return
  }
  
  // 重新获取所有数据
  fetchFireExtinguisherData()
  fetchTowelData()
  fetchSurvivorData()
  fetchFireExtinguisherScoreData()
  fetchTowelScoreData()
  fetchSurvivorScoreData()
}

// 获取灭火器使用事件数据
const fetchFireExtinguisherData = async () => {
  if (!selectedMode.value) return;
  
  fireExtinguisherLoading.value = true
  try {
    const response = await axios.get(
      `${API_BASE_URL}/user-behavior-logs/average-time/${selectedMode.value}/灭火器使用事件`
    )
    if (response.data.code === 1) {
      fireExtinguisherData.value = response.data.data
      initFireExtinguisherChart()
    } else {
      ElMessage.error(`获取灭火器使用事件数据失败: ${response.data.message}`)
    }
  } catch (error) {
    console.error('获取灭火器使用事件数据失败:', error)
    ElMessage.error('获取灭火器使用事件数据失败')
  } finally {
    fireExtinguisherLoading.value = false
  }
}

// 获取毛巾使用事件数据
const fetchTowelData = async () => {
  if (!selectedMode.value) return;
  
  towelLoading.value = true
  try {
    const response = await axios.get(
      `${API_BASE_URL}/user-behavior-logs/average-time/${selectedMode.value}/毛巾使用事件`
    )
    if (response.data.code === 1) {
      towelData.value = response.data.data
      initTowelChart()
    } else {
      ElMessage.error(`获取毛巾使用事件数据失败: ${response.data.message}`)
    }
  } catch (error) {
    console.error('获取毛巾使用事件数据失败:', error)
    ElMessage.error('获取毛巾使用事件数据失败')
  } finally {
    towelLoading.value = false
  }
}

// 获取幸存者事件数据
const fetchSurvivorData = async () => {
  if (!selectedMode.value) return;
  
  survivorLoading.value = true
  try {
    const response = await axios.get(
      `${API_BASE_URL}/user-behavior-logs/average-time/${selectedMode.value}/幸存者事件`
    )
    if (response.data.code === 1) {
      survivorData.value = response.data.data
      initSurvivorChart()
    } else {
      ElMessage.error(`获取幸存者事件数据失败: ${response.data.message}`)
    }
  } catch (error) {
    console.error('获取幸存者事件数据失败:', error)
    ElMessage.error('获取幸存者事件数据失败')
  } finally {
    survivorLoading.value = false
  }
}

// 获取灭火器使用事件得分数据
const fetchFireExtinguisherScoreData = async () => {
  if (!selectedMode.value) return;
  
  fireExtinguisherScoreLoading.value = true
  try {
    const response = await axios.get(
      `${API_BASE_URL}/user-behavior-logs/average-score/${selectedMode.value}/灭火器使用事件`
    )
    if (response.data.code === 1) {
      fireExtinguisherScoreData.value = response.data.data
      initFireExtinguisherScoreChart()
    } else {
      ElMessage.error(`获取灭火器使用事件得分数据失败: ${response.data.message}`)
    }
  } catch (error) {
    console.error('获取灭火器使用事件得分数据失败:', error)
    ElMessage.error('获取灭火器使用事件得分数据失败')
  } finally {
    fireExtinguisherScoreLoading.value = false
  }
}

// 获取毛巾使用事件得分数据
const fetchTowelScoreData = async () => {
  if (!selectedMode.value) return;
  
  towelScoreLoading.value = true
  try {
    const response = await axios.get(
      `${API_BASE_URL}/user-behavior-logs/average-score/${selectedMode.value}/毛巾使用事件`
    )
    if (response.data.code === 1) {
      towelScoreData.value = response.data.data
      initTowelScoreChart()
    } else {
      ElMessage.error(`获取毛巾使用事件得分数据失败: ${response.data.message}`)
    }
  } catch (error) {
    console.error('获取毛巾使用事件得分数据失败:', error)
    ElMessage.error('获取毛巾使用事件得分数据失败')
  } finally {
    towelScoreLoading.value = false
  }
}

// 获取幸存者事件得分数据
const fetchSurvivorScoreData = async () => {
  if (!selectedMode.value) return;
  
  survivorScoreLoading.value = true
  try {
    const response = await axios.get(
      `${API_BASE_URL}/user-behavior-logs/average-score/${selectedMode.value}/幸存者事件`
    )
    if (response.data.code === 1) {
      survivorScoreData.value = response.data.data
      initSurvivorScoreChart()
    } else {
      ElMessage.error(`获取幸存者事件得分数据失败: ${response.data.message}`)
    }
  } catch (error) {
    console.error('获取幸存者事件得分数据失败:', error)
    ElMessage.error('获取幸存者事件得分数据失败')
  } finally {
    survivorScoreLoading.value = false
  }
}

// 初始化灭火器使用事件图表
const initFireExtinguisherChart = () => {
  const chartDom = document.getElementById('fire-extinguisher-chart')
  if (!chartDom || fireExtinguisherData.value.length === 0) return
  
  if (fireExtinguisherChart) {
    fireExtinguisherChart.dispose()
  }
  
  fireExtinguisherChart = echarts.init(chartDom)
  
  // 计算总耗时
  const totalDuration = fireExtinguisherData.value.reduce((sum, item) => sum + item.avgDuration, 0)
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}秒 ({d}%)'
    },
    legend: {
      type: 'scroll',
      orient: 'vertical',
      right: 10,
      top: 'center',
      bottom: 20,
      data: fireExtinguisherData.value.map(item => item.operationType)
    },
    series: [
      {
        name: '耗时占比',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['40%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 5,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          formatter: '{b}\n{c}秒 ({d}%)',
          fontSize: 10
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 12,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: true,
          length: 10,
          length2: 15
        },
        data: fireExtinguisherData.value.map(item => ({
          value: item.avgDuration,
          name: item.operationType,
          percent: ((item.avgDuration / totalDuration) * 100).toFixed(1)
        }))
      }
    ]
  }
  
  fireExtinguisherChart.setOption(option)
}

// 初始化毛巾使用事件图表
const initTowelChart = () => {
  const chartDom = document.getElementById('towel-chart')
  if (!chartDom || towelData.value.length === 0) return
  
  if (towelChart) {
    towelChart.dispose()
  }
  
  towelChart = echarts.init(chartDom)
  
  // 计算总耗时
  const totalDuration = towelData.value.reduce((sum, item) => sum + item.avgDuration, 0)
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}秒 ({d}%)'
    },
    legend: {
      type: 'scroll',
      orient: 'vertical',
      right: 10,
      top: 'center',
      bottom: 20,
      data: towelData.value.map(item => item.operationType)
    },
    series: [
      {
        name: '耗时占比',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['40%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 5,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          formatter: '{b}\n{c}秒 ({d}%)',
          fontSize: 10
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 12,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: true,
          length: 10,
          length2: 15
        },
        data: towelData.value.map(item => ({
          value: item.avgDuration,
          name: item.operationType,
          percent: ((item.avgDuration / totalDuration) * 100).toFixed(1)
        }))
      }
    ]
  }
  
  towelChart.setOption(option)
}

// 初始化幸存者事件图表
const initSurvivorChart = () => {
  const chartDom = document.getElementById('survivor-chart')
  if (!chartDom || survivorData.value.length === 0) return
  
  if (survivorChart) {
    survivorChart.dispose()
  }
  
  survivorChart = echarts.init(chartDom)
  
  // 计算总耗时
  const totalDuration = survivorData.value.reduce((sum, item) => sum + item.avgDuration, 0)
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}秒 ({d}%)'
    },
    legend: {
      type: 'scroll',
      orient: 'vertical',
      right: 10,
      top: 'center',
      bottom: 20,
      data: survivorData.value.map(item => item.operationType)
    },
    series: [
      {
        name: '耗时占比',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['40%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 5,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          formatter: '{b}\n{c}秒 ({d}%)',
          fontSize: 10
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 12,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: true,
          length: 10,
          length2: 15
        },
        data: survivorData.value.map(item => ({
          value: item.avgDuration,
          name: item.operationType,
          percent: ((item.avgDuration / totalDuration) * 100).toFixed(1)
        }))
      }
    ]
  }
  
  survivorChart.setOption(option)
}

// 初始化灭火器使用事件得分图表
const initFireExtinguisherScoreChart = () => {
  const chartDom = document.getElementById('fire-extinguisher-score-chart')
  if (!chartDom || fireExtinguisherScoreData.value.length === 0) return
  
  if (fireExtinguisherScoreChart) {
    fireExtinguisherScoreChart.dispose()
  }
  
  fireExtinguisherScoreChart = echarts.init(chartDom)
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: fireExtinguisherScoreData.value.map(item => item.operationType),
      axisLabel: {
        interval: 0,
        rotate: 45
      }
    },
    yAxis: {
      type: 'value',
      name: '得分',
      max: 5
    },
    series: [
      {
        name: '平均得分',
        type: 'bar',
        data: fireExtinguisherScoreData.value.map(item => item.avgScore),
        itemStyle: {
          color: function(params) {
            const score = params.value;
            if (score >= 4) return '#67C23A'; // 绿色
            if (score >= 2) return '#E6A23C'; // 橙色
            return '#F56C6C'; // 红色
          }
        },
        label: {
          show: true,
          position: 'top',
          formatter: '{c}'
        }
      }
    ]
  }
  
  fireExtinguisherScoreChart.setOption(option)
}

// 初始化毛巾使用事件得分图表
const initTowelScoreChart = () => {
  const chartDom = document.getElementById('towel-score-chart')
  if (!chartDom || towelScoreData.value.length === 0) return
  
  if (towelScoreChart) {
    towelScoreChart.dispose()
  }
  
  towelScoreChart = echarts.init(chartDom)
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: towelScoreData.value.map(item => item.operationType),
      axisLabel: {
        interval: 0,
        rotate: 45
      }
    },
    yAxis: {
      type: 'value',
      name: '得分',
      max: 5
    },
    series: [
      {
        name: '平均得分',
        type: 'bar',
        data: towelScoreData.value.map(item => item.avgScore),
        itemStyle: {
          color: function(params) {
            const score = params.value;
            if (score >= 4) return '#67C23A'; // 绿色
            if (score >= 2) return '#E6A23C'; // 橙色
            return '#F56C6C'; // 红色
          }
        },
        label: {
          show: true,
          position: 'top',
          formatter: '{c}'
        }
      }
    ]
  }
  
  towelScoreChart.setOption(option)
}

// 初始化幸存者事件得分图表
const initSurvivorScoreChart = () => {
  const chartDom = document.getElementById('survivor-score-chart')
  if (!chartDom || survivorScoreData.value.length === 0) return
  
  if (survivorScoreChart) {
    survivorScoreChart.dispose()
  }
  
  survivorScoreChart = echarts.init(chartDom)
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: survivorScoreData.value.map(item => item.operationType),
      axisLabel: {
        interval: 0,
        rotate: 45
      }
    },
    yAxis: {
      type: 'value',
      name: '得分',
      max: 5
    },
    series: [
      {
        name: '平均得分',
        type: 'bar',
        data: survivorScoreData.value.map(item => item.avgScore),
        itemStyle: {
          color: function(params) {
            const score = params.value;
            if (score >= 4) return '#67C23A'; // 绿色
            if (score >= 2) return '#E6A23C'; // 橙色
            return '#F56C6C'; // 红色
          }
        },
        label: {
          show: true,
          position: 'top',
          formatter: '{c}'
        }
      }
    ]
  }
  
  survivorScoreChart.setOption(option)
}

// 导出事件分布数据
const exportEventDistribution = (eventType) => {
  let data = []
  let title = ''
  let fileName = ''
  
  switch(eventType) {
    case 'fireExtinguisher':
      data = fireExtinguisherData.value
      title = '灭火器使用事件耗时分布'
      fileName = '灭火器使用事件'
      break
    case 'towel':
      data = towelData.value
      title = '毛巾使用事件耗时分布'
      fileName = '毛巾使用事件'
      break
    case 'survivor':
      data = survivorData.value
      title = '幸存者事件耗时分布'
      fileName = '幸存者事件'
      break
    default:
      return
  }
  
  if (!data || data.length === 0) {
    ElMessage.warning('暂无数据可导出')
    return
  }
  
  // 计算总耗时
  const totalDuration = data.reduce((sum, item) => sum + item.avgDuration, 0)
  
  const wb = XLSX.utils.book_new()
  const wsData = [
    ['操作环节', '平均耗时(秒)', '占比(%)']
  ]
  
  // 添加数据
  data.forEach(item => {
    const percent = ((item.avgDuration / totalDuration) * 100).toFixed(1)
    wsData.push([item.operationType, item.avgDuration, percent])
  })
  
  const ws = XLSX.utils.aoa_to_sheet(wsData)
  XLSX.utils.book_append_sheet(wb, ws, title)
  
  const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
  const blob = new Blob([excelBuffer], { type: 'application/octet-stream' })
  saveAs(blob, `VR安全教育平台-${fileName}-耗时分布.xlsx`)
}

// 导出得分分布数据
const exportScoreDistribution = (eventType) => {
  let data = []
  let title = ''
  let fileName = ''
  
  switch(eventType) {
    case 'fireExtinguisher':
      data = fireExtinguisherScoreData.value
      title = '灭火器使用事件得分分布'
      fileName = '灭火器使用事件'
      break
    case 'towel':
      data = towelScoreData.value
      title = '毛巾使用事件得分分布'
      fileName = '毛巾使用事件'
      break
    case 'survivor':
      data = survivorScoreData.value
      title = '幸存者事件得分分布'
      fileName = '幸存者事件'
      break
    default:
      return
  }
  
  if (!data || data.length === 0) {
    ElMessage.warning('暂无数据可导出')
    return
  }
  
  const wb = XLSX.utils.book_new()
  const wsData = [
    ['操作环节', '平均得分']
  ]
  
  // 添加数据
  data.forEach(item => {
    wsData.push([item.operationType, item.avgScore])
  })
  
  const ws = XLSX.utils.aoa_to_sheet(wsData)
  XLSX.utils.book_append_sheet(wb, ws, title)
  
  const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
  const blob = new Blob([excelBuffer], { type: 'application/octet-stream' })
  saveAs(blob, `VR安全教育平台-${fileName}-得分分布.xlsx`)
}

// 组件挂载时初始化图表
onMounted(() => {
  // 获取模式列表
  fetchModes()
  
  // 添加窗口大小变化监听
  window.addEventListener('resize', handleResize)
})

// 处理窗口大小变化
const handleResize = () => {
  fireExtinguisherChart && fireExtinguisherChart.resize()
  towelChart && towelChart.resize()
  survivorChart && survivorChart.resize()
  fireExtinguisherScoreChart && fireExtinguisherScoreChart.resize()
  towelScoreChart && towelScoreChart.resize()
  survivorScoreChart && survivorScoreChart.resize()
}

// 组件卸载时清理资源
onUnmounted(() => {
  // 清理所有图表
  if (fireExtinguisherChart) {
    fireExtinguisherChart.dispose()
    fireExtinguisherChart = null
  }
  if (towelChart) {
    towelChart.dispose()
    towelChart = null
  }
  if (survivorChart) {
    survivorChart.dispose()
    survivorChart = null
  }
  if (fireExtinguisherScoreChart) {
    fireExtinguisherScoreChart.dispose()
    fireExtinguisherScoreChart = null
  }
  if (towelScoreChart) {
    towelScoreChart.dispose()
    towelScoreChart = null
  }
  if (survivorScoreChart) {
    survivorScoreChart.dispose()
    survivorScoreChart = null
  }
  
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.behavior-container {
  padding: 10px;
}

.mode-selector {
  margin-bottom: 20px;
  width: 200px;
  float: right;
}

.chart-row {
  margin-bottom: 20px;
  clear: both;
}

.chart-card {
  margin-bottom: 0;
  position: relative;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  height: 300px;
  width: 100%;
  min-height: 250px;
}

.chart-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #606266;
  font-size: 14px;
  z-index: 10;
}
</style>